<style lang='less' >
@import '~style/filter.less';
@import '~style/table.less';

  
</style>

<template>
 <div id='couponList'>
    <div v-show='this.$route.name == "couponList"'>
        <div class="filterForm">
            <div class="filterContBox">
                <div class="filterLabel">卡券名称</div>
                <el-input 
                v-model.trim="filterObj.name" 
                placeholder="请输入卡券名称"
                class="filterInput"
                size="small"
                ></el-input>
            </div>
            
             <div class="filterContBox">
                <div class="filterLabel">卡券ID</div>
                <el-input 
                size="small"
                v-model.trim="filterObj.cardId" 
                placeholder="请输入卡券ID"
                class="filterInput"
                ></el-input>
            </div>
            <div class="filterContBox">
                <div class="filterLabel">类型</div>
                <el-select 
                clearable
                size="small"
                class="filterInput"
                v-model="filterObj.type" 
                placeholder="请选择">
                    <el-option
                        v-for="item in typeOption"
                        :key="item.name"
                        :label="item.value"
                        :value="item.name">
                    </el-option>
                </el-select>
            </div>
            <div class="filterContBox">
                <div class="filterLabel">状态</div>
                <el-select 
                clearable
                size="small"
                class="filterInput"
                v-model="filterObj.status" 
                placeholder="请选择">
                    <el-option
                        v-for="item in statusOption"
                        :key="item.name"
                        :label="item.value"
                        :value="item.name">
                    </el-option>
                </el-select>
            </div>
            <div class="filterContBox">
                <span class="filterLabel">创建起止时间</span>
                <el-date-picker
                size="small"
                v-model="createionTimeArr"
                @change="setDaterange"
                type="daterange"
                placeholder="选择日期范围">
                </el-date-picker>
            </div>

        </div>

        <div class="filterButton">
            <el-button type="warning" class="btn" size="small" @click='getCouponList()'>查询</el-button>
            <el-button type="warning" class="btn" size="small" @click='goPage("couponAdd")' v-if='getButtonConfig && getButtonConfig.create'>
                <span class="iconfont">&#xe60c;</span> 新增
            </el-button>
        </div>

        <div class="dataBox">
            <el-table
            v-loading="loading"
            :data="showData"
            height="450"
            style="width: 100%"
            :default-sort = "{prop: 'id', order: 'ascending'}">
            <el-table-column
                prop='index'
                sortable
                label="序号"
                width='80'>
            </el-table-column>
            <el-table-column
                prop="name"
                label="名称"
                width='150'>
            </el-table-column>
                <el-table-column
                prop="type"
                label="类型"
                :formatter='getShowType'
                width='80'>
            </el-table-column>
                <el-table-column
                prop="faceValue"
                label="面值"
                width=config.s>
            </el-table-column>
                <el-table-column
                prop="cardIdText"
                label="卡券ID"
                width='200'>
            </el-table-column>
                <el-table-column
                prop="issueCount"
                label="发放数量"
                width='100'>
            </el-table-column>
                <el-table-column
                prop="takeCount"
                label="已领取数量"
                sortable
                width='130'>
            </el-table-column>
                <el-table-column
                prop="useCount"
                label="已使用数量"
                sortable
                width='130'>
            </el-table-column>
            <el-table-column
                prop="takeDateStarted"
                label="领取开始时间"
                sortable
                width='150'>
            </el-table-column>
            <el-table-column
                prop="takeDateEnd"
                label="领取结束时间"
                sortable
                width='150'>
            </el-table-column>
            <el-table-column
                prop="expireDate"
                label="使用结束时间"
                sortable
                width='150'>
            </el-table-column>
            
            <el-table-column
                prop="dateCreated"
                label="创建时间"
                sortable
                width='170'>
            </el-table-column>
            <el-table-column
                prop="status"
                label="状态"
                :formatter='getShowStatus'
            >
            </el-table-column>
            <el-table-column
                label="操作"
                width='200'>
                <template scope="scope" >
                    <btns-box
                        :scope='scope'
                        :btnControl='getButtonConfig'
                        :status='scope.row.status'
                        :tekeStartDate='scope.row.takeDateStarted'
                        :tekeEndDate='scope.row.takeDateEnd'
                        :totalNum='scope.row.issueCount'
                        :takeNum='scope.row.takeCount'
                    ></btns-box>
                </template>

            </el-table-column>
            </el-table>
        </div>

        <div class="paginationBox">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-sizes="[20, 30, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total='totalSize'>
            </el-pagination>
        </div>

    </div>

    <transition v-show='this.$route.name == "couponListPublish" || this.$route.name == "couponListDetail" '>
        <router-view
            v-on:isPublishSucced='isPublishSucced'
            v-on:setTitleMsg='setTitleMsg'
        ></router-view>
    </transition>

 </div>
</template>

<script>
    import btnsBox from './_button.vue'
    import {postCouponList as getCouponList} from 'api/coupon/index.js'
    import {typeOption, statusOption} from '../config.js'
    import { mapGetters } from 'vuex'

    export default {
      components: {
        btnsBox
      },
      data () {
        return {
          filterObj: {
            name: '',
            cardId: '',
            type: '',
            status: '',
            dateEnd: '',
            dateStart: ''
          },
          createionTimeArr: null, //选择的创建起止时间
          typeOption: typeOption,
          statusOption: statusOption,
          data: [], //查询回来的数据，全部！没有分页处理
          totalSize: 0, //总条数
          currentPage: 1, //当前页
          pageSize: 20, //每页显示的条数
          showData: [],
          loading: false
        }
      },
      computed: {
        getButtonConfig () {
          return this.$store.getters.getButtonConfig('couponList')
        }
      },
      methods: {
        setShowData () {
          let arr = this.data,
            page = this.currentPage,
            size = this.pageSize;
                // console.log(`page:${page}`, `size:${size}`, arr)
          arr = arr.slice((page - 1) * size, page * size)
          this.showData = arr
        },
        handleSizeChange (val) {
                // console.log(`每页 ${val} 条`);
          this.pageSize = val;
          this.currentPage = 1;
          this.setShowData()
        },
        handleCurrentChange (val) {
                // console.log(`当前页: ${val}`);
          this.currentPage = val;
          this.setShowData()
        },
        setParams (obj1) { //部分请求参数不能传空值！
          let {keys} = Object, params = {};
          for (let key of Object.keys(obj1)) {
                    // console.log(key, obj1[key])
            if (obj1[key]) {
              params[key] = obj1[key]
            }
          }
          return params
        },
        async getCouponList () {
          try {
            let parm = this.setParams(this.filterObj)
            this.loading = true;
            let back = await getCouponList(parm)
            back = back.data
            console.log('查询卡卷列表！', parm, back)
            if (back && back.resultCode == '200') {
              if (back.result) {
                for (let i = 0; i < back.result.length; i++) {
                  back.result[i].index = i + 1
                  back.result[i].expireDate = back.result[i].expireType == 'FIXED_DATE' ? back.result[i].expireDate : '领取后' + back.result[i].expireDays + '天过期';
                }
              }
              this.data = back.result.reverse();
              this.totalSize = back.size;
              this.setShowData()
            }
            this.loading = false;
          } catch (err) {
            this.loading = false;
            this.$alert('查询错误！')
            console.error(err)
          }
        },
        setDaterange (val) {
                // console.log(val)
          let startTime = val ? val.slice(0, 10) + ' 00:00:00' : '',
            endTime = val ? val.slice(13, val.length) + ' 23:59:59' : '';
          this.filterObj.dateStart = startTime;
          this.filterObj.dateEnd = endTime;
        },
        getShowType (row, column) {
          for (let i = 0; i < typeOption.length; i++) {
            if (typeOption[i].name == row.type) {
              return typeOption[i].value
            }
          }
        },
        getShowStatus (row, column) {
          if (row.status == 'DISABLE') {
          }
          return row.status == 'ENABLE' ? '启用' : row.status == 'DISABLE' ? '禁用' : ''
        },
        isPublishSucced (e) {
          console.log('是否有发放卡卷', e)//发放了卡券要重载页面
          if (e) {
            this.getCouponList()
          }
        },
        goPage (name, parm = {}, query = {}) {
          console.log(name)
          this.$router.push({
            name: name,
            params: parm,
            query: query
          })
        },
        setTitleMsg (msg) {
          this.$emit('setTitleMsg', msg)
        }
      },
      created () {
        this.setTitleMsg(['卡券管理', '卡券列表'])
        this.getCouponList()
      },
      mounted () {

      }
}
</script>
